<template>
	<view class="contact">
		<view class="list-box" id="box"  v-if="list.length > 0">
			<view class="uni-list">
				<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
					<view class="uni-list-cell-navigate">
						<view class="">
							{{item.remark?'【'+item.remark+'】':''}}{{item.callee}} 
							<view class="mui-pull-right">费用:￥{{item.fee}}</view>
						</view>
						<view class="">
							{{item.answertime}} 
							<view class="mui-pull-right">时长：{{item.billsec}}分钟</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="no-data" v-else>没有相关数据</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				list: [],
				page: 1,
				nextPage: true
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getList() {
				if(this.nextPage == false) {
					return '';
					
				}
				var url =  'call/cdr';
				var that = this;
				Request.send({
					url: url,
					data: {page: that.page},
					sCallback: function(res) {
						that.list = that.list.concat(res.data);
						that.page++;
						if(res.data.length < 20) {
							that.nextPage = false;
						}
					}
				})
			}
		}
	}
</script>

<style>
		page{
			background: #fff;
			/* color: #B2B3B4; */
			font-size: 28upx;
		}
		
		.uni-list{
			background: none;
		}

		.add-contact{
			text-align: center;
			width: 70px;
			height: 70px;
			position: fixed;
			bottom: 45px;
			right: 20px;
			border-radius: 50%;
			font-size:12px;
			font-weight:400;
			color:rgba(255,255,255,1);
			background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
			z-index: 99;
			padding: 20px 0;
			line-height: 15px;
		}


		/*添加联系人*/
		.mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background: rgba(0, 0, 0, 0.7);
		}


		.mask .mask-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
		}

		.mask .mask-container .title{
			line-height: 40px;
			padding: 0 20px;
			border-bottom: 1px solid #eee;
			color: #272822;
		}

		.mask .mask-container .info{
			padding: 20px;
		}

		.mask .mask-container .add-btn{
			color:rgba(255,255,255,1);
			background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
			line-height: 40px;
			width: 100%;
			text-align: center;
		}

		.mui-table-view{
			background: none;
		}

		.mui-table-view .mui-table-view-cell:after{
			left: 0;
		}
</style>
